<template>
  <div class="login-page">
    <h1>光谷智慧交通系统管理平台</h1>
    <div class="login-container">
      <el-card class="login-card">
        <div class="login-menu">
          <el-menu
            default-active="user"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="user">普通用户</el-menu-item>
            <el-menu-item index="traffic">交管部门</el-menu-item>
            <el-menu-item index="admin">管理员</el-menu-item>
          </el-menu>
        </div>
        <div class="login-input">
          <el-input v-model="userInfo.username" placeholder="请输入用户名" />
          <el-input
            v-model="userInfo.password"
            type="password"
            placeholder="请输入密码"
            show-password
            @keyup.enter="handleLogin"
          />
          <div class="login-checkbox">
            <el-checkbox
              v-model="rememberPassword"
              label="记住密码"
              size="large"
            />
            <a href="">忘记密码？</a>
          </div>
        </div>
        <div class="login-button">
          <el-button type="primary" class="login-btn" @click="handleLogin"
            >登录</el-button
          >
          <router-link to="/register">
            <el-button
              type="primary"
              class="register-btn"
              :disabled="userInfo.type !== 'user'"
              :class="{ disabled: userInfo.type !== 'user' }"
              >新用户注册</el-button
            >
          </router-link>
        </div>
      </el-card>
    </div>
    <video autoplay muted loop id="myVideo">
      <source src="../../public/26大数据智慧交通.mp4" />
    </video>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
import { useRouter ,useRoute} from 'vue-router';
import { loginUser } from '@/apis/index';
const router = useRouter();
const route = useRoute();

// import { userData } from '../stores/userData.js'
// import { storeToRefs } from 'pinia';
// const { user } = storeToRefs(userData());

const userInfo = ref({
  username: '',
  password: '',
  type: 'user',
});

const rememberPassword = ref(false);

const handleSelect = (key) => {
  userInfo.value.type = key;
};

const handleLogin = async () => {
  if (!userInfo.value.username || !userInfo.value.password) {
    ElMessage.warning('请输入用户名和密码');
    return;
  }
  // 发送送登录请求
  loginUser(userInfo.value)
    .then((res) => {
      if (res.data.status == 1) {
        localStorage.setItem('jwtToken', res.data.token);
        localStorage.setItem(
          'user',
          JSON.stringify({
            username: userInfo.value.username,
            type: userInfo.value.type,
          })
        );
        const redirect = route.query.redirect || '/';
        router.push(redirect);
        axios.defaults.headers.common[
          'Authorization'
        ] = `Bearer ${res.data.token}`; // 存储token到本地存储
        ElMessage.success('登录成功');
        router.push('/');
      } else {
        ElMessage.error('用户名或密码错误');
      }
    })
    .catch((err) => {
      ElMessage.error('登录失败，请重试');
    });
};
</script>

<style lang="scss" scoped>
.login-page {
  width: 100%;
  min-height: 100vh;
  padding: 30px 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  h1 {
    color: white;
    margin-bottom: 40px;
    font-size: 32px;
    // 字间距
    letter-spacing: 5px;
  }
}

.login-card {
  width: 380px;
  :deep(.el-card__body) {
    padding: 30px 20px;
  }
}

.login-menu {
  margin-bottom: 30px;

  :deep(.el-menu) {
    border-bottom: none;
    height: 30px;
    justify-content: space-evenly;

    .el-menu-item {
      height: 30px;
      line-height: 30px;
      background-color: white;
    }
  }
}

.login-input {
  :deep(.el-input) {
    margin-bottom: 15px;

    .el-input__wrapper {
      box-shadow: none;
      border-radius: 0;
      border-bottom: 1px solid #dcdfe6;
      padding: 6px 0;

      &.is-focus {
        box-shadow: none;
        border-bottom: 1px solid #409eff;
      }
    }
  }
}

.login-checkbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  a {
    color: #409eff;
    text-decoration: none;
    font-size: 14px;
  }
}

.login-button {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .el-button {
    width: 100%;
    padding: 20px 0;
    background-color: rgb(14, 43, 100);
    border: 1px solid #666;
  }

  .register-btn {
    margin-left: 0;
    background-color: white;
    color: black;
  }

  :deep(.register-btn.disabled) {
    color: #999;
    background: transparent;
    border: 1px solid #dcdfe6;
  }
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -2;
}
</style>
